<template>
  <div
       class="mobile"
       v-infinite-scroll="handleInfiniteOnLoad"
       :infinite-scroll-disabled="busy"
       :infinite-scroll-distance="10">
    <div class="mobileHeight">
      <div class="good-pic-box">
        <img class="good-pic" src="../../assets/img/mobile/banner1.png">
      </div>
      <a-divider class="good-divider"/>
      <a-card :bordered="false" class="pagePadding">
        <h3>记录点滴感动&nbsp;&nbsp;宣传社会正能</h3>
        <a-list item-layout="horizontal":data-source="data">
          <a-list-item class="goodList" slot="renderItem" slot-scope="item, index">
            <div class="good-img">
              <img v-if="item.picAttach != null" :src="picPostAction+item.picAttach">
              <img v-if="item.picAttach  === null" src="../../assets/img/mobile/banner1.png">
            </div>
            <div class="good-list">
              <a slot="title" @click="linkDetail(item.id)">{{ item.title }}</a>
              <p>{{ item.createTime }} </p>
            </div>
          </a-list-item>
          <a-spin v-if="loading" class="demo-loading" />
        </a-list>
      </a-card>
      <div class="add-things" @click="addThings()"><a-icon type="edit" /></div>
    </div>
    <div class="weui-tabbar">
      <a href="javascript:void(0);" class="weui-tabbar__item" @click="firstPage()">
        <span><i class="iconfont iconzhuye2"></i></span>
        <p class="weui-tabbar__label">首页</p>
      </a>
      <a href="javascript:void(0);" class="weui-tabbar__item" @click="hrhsPage()">
        <span><i class="iconfont icondianzan3"></i></span>
        <p class="weui-tabbar__label">好人好事</p>
      </a>
      <a href="javascript:void(0);" class="weui-tabbar__item" @click="myPage()">
        <span><i class="iconfont iconwode-copy"></i></span>
        <p class="weui-tabbar__label">我的</p>
      </a>
    </div>
  </div>
</template>
<script>

import infiniteScroll from 'vue-infinite-scroll';
import {postAction,getAction} from "@api/manage";

//取审核通过的好人好事
const status = 2;
var pageNo = 1;
var totalCount =0;

export default {
  name: 'GoodThingsList',
  directives: { infiniteScroll },
  data() {
    return {
      data:[],
      loading: false,
      busy: false,
      picPostAction:""
    };
  },
  created() {
    document.title = "好人好事";
    pageNo = 1;
    this.loading = true;
    this.initBaseUrl();
    this.getGoodThingsList();
  },
  methods: {
    initBaseUrl(){
      this.picPostAction=window._CONFIG['domianURL']+"/file/sysFile/download?fileId=";
    },
    getGoodThingsList(){
      this.loading = true;
      const data = this.data;
      getAction("/goodThings/list?status="+status+"&pageNo="+pageNo).then(res=>{
        if(res.success){
          this.data = data.concat(res.result.records).map((item, index) => ({ ...item, index }));
          pageNo = res.result.current + 1;
          totalCount = res.result.total;
          this.loading = false;        }
      }).catch(()=>{
        this.loading = false;
      })
    },
    linkDetail(id){
      this.$router.push({path:'/GoodThingsDetail',query:{id:id}});
    },
    addThings(){
      this.$router.push('/GoodThingsAdd');
    },
    handleInfiniteOnLoad() {
      if (this.data.length >= totalCount) {
        this.busy = true;
        this.loading = false;
        return;
      }
      this.getGoodThingsList();
    },
    firstPage(){
      this.$router.push('/MinorsProtecteGuide');
    },
    hrhsPage(){
      this.$router.push('/GoodThingsList');
    },
    myPage(){
      this.$router.push('/PersonalMsg');
    }
  }
};
</script>
<style>
.demo-loading {
  position: absolute;
  bottom: 40px;
  width: 100%;
  text-align: center;
}
</style>